<template>
    <div>
        <basic-container>
            <div class="app-container">

                <el-table v-loading="loading" :data="menuList" row-key="user_id" :default-expand-all="isExpandAll"
                    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
                    <el-table-column prop="user1.user_name" label="现场负责人"></el-table-column>
                    <el-table-column prop="user2.user_name" label="品质负责人" align="center"></el-table-column>
                    <el-table-column prop="user3.user_name" label="工艺设备负责人" align="center"></el-table-column>
                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                        <template slot-scope="scope">
                            <el-button size="mini" type="text" icon="el-icon-edit"
                                :disabled="scope.row.account == 'admin'" @click="handleUpdate(scope.row)">修改</el-button>

                        </template>

                    </el-table-column>
                </el-table>

                <!-- 添加或修改菜单对话框 -->
                <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body
                    :close-on-click-modal="false">
                    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                        <el-row>
                            <el-col :span="19">
                                <el-form-item label="现场负责人" prop="user1.user_name">
                                    <el-select v-model="form.user1.user_id" placeholder="请选择" style="width: 100%">
                                        <el-option v-for="item in roleOptions" :key="item.user_id" :label="item.name"
                                            :value="item.user_id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="19">
                                <el-form-item label="品质负责人" prop="user2.user_name">
                                    <el-select v-model="form.user2.user_id" placeholder="请选择" style="width: 100%">
                                        <el-option v-for="item in roleOptions" :key="item.user_id" :label="item.name"
                                            :value="item.user_id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="19">
                                <el-form-item label="工艺设备负责人" prop="user3.user_name">
                                    <el-select v-model="form.user3.user_id" placeholder="请选择" style="width: 100%">
                                        <el-option v-for="item in roleOptions" :key="item.user_id" :label="item.name"
                                            :value="item.user_id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </el-dialog>
            </div>
        </basic-container>
    </div>
</template>

<script>
import { getConfigs, grtUsersall, eidconfigs } from "@/api/view";


export default {
    data() {

        return {

            loading: false,
            // 显示搜索条件
            showSearch: true,
            value1: [],
            total: 1,
            inMess: [],
            menuList: [],
            roleOptions: [],
            dataMuen: [{
                value: 0,
                label: '是'
            }, {
                value: 1,
                label: '否'
            },],
            options: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 是否展开，默认全部折叠
            isExpandAll: false,
            // 重新渲染表格状态
            refreshTable: true,
            // 查询参数
            queryParams: {
                index: 1,
                enable: null,
                size: 10,
                account: '',
                name: '',
                phone: '',
            },
            // 表单参数
            form: {
                user1: {
                    user_id: null,
                    user_name: null
                },
                user2: {
                    user_id: null,
                    user_name: null
                },
                user3: {
                    user_id: null,
                    user_name: null
                },
            },
            // 表单校验
            rules: {
                account: [
                    { required: true, message: "账户名称不能为空", trigger: "blur" }
                ],
                password: [
                    { required: true, message: "账户密码不能为空", trigger: "blur" }
                ],
                role_id: [
                    { required: true, message: "角色不能为空", trigger: "blur" }
                ],

                framework: [
                    { required: true, message: "人员组织架构不能为空", trigger: "blur" }
                ]
            }
        }

    },
    created() {
        this.getList();
        this.gitUser()
    },

    methods: {

        /** 查询菜单列表 */
        getList() {
            this.loading = true;
            getConfigs(this.queryParams).then(response => {

                this.menuList = []
                let objData = response.data.data
                this.menuList.push(objData)
                this.loading = false;
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.getList();
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                user1: {
                    user_id: null,
                    user_name: null
                },
                user2: {
                    user_id: null,
                    user_name: null
                },
                user3: {
                    user_id: null,
                    user_name: null
                },
            };

        },




        /** 修改按钮操作 */
        handleUpdate(row) {

            this.reset()
            this.form = row
            this.open = true;
            this.title = "修改用户";
        },
        gitUser() {
            grtUsersall().then(res => {
                this.roleOptions = res.data.data

            })
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    eidconfigs(this.form).then(res => {
                        console.log(res);
                        this.$message({
                            message: "修改成功",
                            type: "success",
                        });
                        this.open = false;
                        this.getList();
                        this.reset();
                    })
                }
            });
        },
    }
};
</script>

<style></style>